<template>
  <view class="container">

    <view class="myorder_box" v-cloak>
      <view class="myorder_box_header">
        <text>{{ orderInfo.deptName }}</text>
        <image src="/static/images/mine/shoji.png" mode="widthFix" @click="go()"></image>
      </view>

      <view class="myorder_box_bodyer">
        <view class="qrcode d-flex just-content-center align-items-center" v-if="orderInfo.status == 1">
          <canvas :style="{ width: qrcodeSize + 'px', height: qrcodeSize + 'px' }" canvas-id="memberCode"></canvas>
        </view>
        <view class="myorder_box_bodyer_no" v-if="orderInfo.status == 2">
          订单已核销
        </view>
		<view class="myorder_box_bodyer_no" v-if="orderInfo.status == 5">
		  订单已申请退款
		</view>
		<view class="myorder_box_bodyer_no" v-if="orderInfo.status == 6">
		  订单已退款
		</view>
        <text class="open" v-if="orderInfo.status == 1">请将 二维码 展示给店员完成付款</text>
        <view class="myorder_text_box">
          <block v-for="(item,i) in orderInfo.details" :key="i">
            <view class="myorder_box_bodyer_text">
              <h1>{{ item.productName }}</h1>
              <view class="myorder_box_bodyer_img">
                <text>×{{item.count}}</text>
                <text>￥{{ item.payPrice }}</text>
              </view>
            </view>
          </block>
        </view>
      </view>

      <view class="myorder_box_footer  border">
        <view class="myorder_box_footer_text">
          <h1>支付方式</h1>
          <text v-if="orderInfo.paymentType == 0">线下</text>
          <text v-if="orderInfo.paymentType == 1">小程序</text>
          <text v-if="orderInfo.paymentType == 2">公众号</text>
          <text v-if="orderInfo.paymentType == 3">H5</text>
          <text v-if="orderInfo.paymentType == 4">PC</text>
          <text v-if="orderInfo.paymentType == 5">支付宝</text>
          <text v-if="orderInfo.paymentType == 6">余额</text>
        </view>
        <view class="myorder_box_footer_text">
          <h1>总计金额</h1>
          <text style="color: #FF6666;">￥{{ orderInfo.payPrice }}</text>
        </view>
      </view>

      <view class="myorder_box_footer">
        <view class="myorder_box_footer_text">
          <h1>下单时间</h1>
          <text>{{ orderInfo.createTime }}</text>
        </view>
        <view class="myorder_box_footer_text">
          <h1>订单号</h1>
          <text>{{ orderInfo.orderNum }}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  const qrCode = require('@/libs/weapp-qrcode.js');
  import {
    mapGetters
  } from 'vuex'

  import {
    orderDetailByUser
  } from "@/api/order";

  export default {
    data() {
      return {
        qrcodeSize: uni.upx2px(260),
        orderInfo: [],
        name: '',
        vipCardName: ''
      };
    },
    onLoad(options) {
      // console.log(options)
      if (this.isLogin) {
        this.getOrderDetail(options.id);
        this.name = options.name
        this.vipCardName = options.vipCardName
      } else {
        this.login();
      }
    },
    onShow() {},
    computed: {
      ...mapGetters('m_user', ['isLogin', 'userInfo'])
    },
    methods: {
      login() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      getOrderDetail: function(id) {
        let that = this;
        orderDetailByUser(id).then(res => {
          // console.log(res)
          that.orderInfo = res.data;
          if (that.orderInfo && that.orderInfo.id) {
            let params = {
              userId: that.userInfo.id,
              orderId: that.orderInfo.id,
              type: 0 //0 购卡/门票 1 会员卡使用 2 优惠劵
            }
            that.makeMemberCode(JSON.stringify(params))
          } else {
            that.orderInfo = false;
          }
        }, error => {
          uni.showToast({
            title: error
          })
        });
      },
      go() {
        uni.makePhoneCall({
          // 手机号
          phoneNumber: this.orderInfo.deptPhone,
          // 成功回调
          success: (res) => {
            console.log('调用成功!')
          },
          // 失败回调
          fail: (res) => {
            console.log('调用失败!')
          }
        });
      },
      makeMemberCode(text) {
        new qrCode('memberCode', {
          text: text,
          width: this.qrcodeSize,
          height: this.qrcodeSize,
          colorDark: '#333333',
          colorLight: '#FFFFFF',
          correctLevel: qrCode.CorrectLevel.H
        });
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fbfbfb;

    .container {
      padding: 24rpx 47rpx;
    }

    .myorder_box {
      width: 100%;
      background-color: #fff;
      border-radius: 20rpx;

      .myorder_box_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 130rpx;
        // background-color: #0066CC;
        border-bottom: 1px solid rgba(241, 241, 241, 1);
        padding: 0 54rpx;

        text {
          font-size: 30rpx;
        }

        image {
          width: 40rpx;
          height: 44rpx;
        }
      }

      .myorder_box_bodyer {
        // height: 540rpx;
        padding: 66rpx 54rpx 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .myorder_box_bodyer_no {
          width: 260rpx;
          height: 260rpx;
          // background-color: #07C160;
          font-size: 44rpx;
          text-align: center;
          line-height: 260rpx;
          // font-weight: bold;
        }

        image {
          width: 268rpx;
          height: 268rpx;
        }

        .open {
          color: rgba(61, 61, 61, 0.5);
          font-size: 30rpx;
          margin-top: 44rpx;
        }

        .myorder_text_box {
          width: 100%;
          margin-top: 70rpx;
        }

        .myorder_box_bodyer_text {
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: rgba(61, 61, 61, 1);
          font-size: 30rpx;
          margin: 20rpx 0;

          h1 {
            width: 50%;
          }

          .myorder_box_bodyer_img {
            width: 221rpx;
            display: flex;
            justify-content: space-between;
          }
        }
      }

      .myorder_box_footer {
        height: 230rpx;
        padding: 0 54rpx;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .myorder_box_footer_text {
          display: flex;
          justify-content: space-between;
          font-size: 30rpx;

          h1 {
            color: rgba(61, 61, 61, 0.5);
          }
        }
      }

      .border {
        border-bottom: 1px solid rgba(241, 241, 241, 1);
        border-top: 1px solid rgba(241, 241, 241, 1);
      }
    }


    .nodetails {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-bottom: 128rpx;

      .nodetails_img {
        .maxImage {
          width: 346rpx;
          height: 156rpx;
        }
      }

      text {
        font-size: 36rpx;
        margin-top: 20rpx;
        color: rgba(61, 61, 61, 0.3);
      }
    }
  }
</style>
